<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../static/global.js"></script>
    <!--<script src="../../static/jquery-1.8.0.js"></script>-->

    <link rel="stylesheet" href="../../static/layui_ext/dtree/dtree.css">
    <link rel="stylesheet" href="../../static/layui_ext/dtree/font/dtreefont.css">
</head>
<body>

<ul id="demoTree" class="dtree" data-id="0"></ul>

<ul id="selTree1" class="dtree" data-id="0" ></ul>

<script>
    layui.extend({
        dtree: '../../static/layui_ext/dtree/dtree'   // {/}的意思即代表采用自有路径，即不跟随 base 路径
    }).use(['dtree','layer','jquery'], function(){
        var dtree = layui.dtree, layer = layui.layer, $ = layui.jquery;

        // 初始化树
        // var DemoTree = dtree.render({
        //     elem: "#demoTree",
        //     method:"get",
        //     dataStyle: "layuiStyle",  //使用layui风格的数据格式
        //     response:{message:"msg",statusCode:0}, //修改response中返回数据的定义
        //     url: glodate.serverZuul+'category/getTree', // 使用url加载（可与data加载同时存在）
        // });



        dtree.renderSelect({
            elem: "#selTree1",
            width: "100%", // 指定树的宽度
            method:"get",
            dataStyle: "layuiStyle",  //使用layui风格的数据格式
            response:{message:"msg",statusCode:0}, //修改response中返回数据的定义
            url: glodate.serverZuul+'category/getTree', // 使用url加载（可与data加载同时存在）
            selectTips: "我想做一个成熟的提示语"
        });


        // 绑定节点点击
        // dtree.on("node('demoTree')" ,function(obj){
        //     layer.msg(JSON.stringify(obj.param));
        // });
    });
</script>
</body>
</html>